<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jq包//jquery-2.1.4/jquery.js"></script>
</head>

<body>
    <div id="list"></div>

</body>
<script>
    var data = [
        {
            name: "a1",
            child: [{
                name: "b1",
                child: [
                    { name: "c11" },
                    { name: "c12" },
                    { name: "c13" }
                ]
            },
            {
                name: "bb1",
                child: [
                    { name: "cc11" },
                    { name: "cc12" },
                    { name: "cc13" }
                ]
            }
            ]
        },
        {
            name: "a2",
            child: [{
                name: "b2",
                child: [
                    { name: "c11" },
                    { name: "c12" },
                    { name: "c13" }
                ]
            }]
        },
        { name: "a3", },
        { name: "a4", }
    ]
    var list = document.getElementById("list")
    name();
    function name() {
        list.innerHTML = digui(data)
    };
    //递归
    function digui(data) {
        var str = "<ul>"
        for (let i = 0; i < data.length; i++) {//第一级
            str += "<li><span>-</span>" + '<i>' + data[i].name + "</i>";
            if (data[i].child) {
                // console.log(data[i].child);
                str += digui(data[i].child);
            };
            str += "</li>";
        };
        str += "</ul>";
        return str;
    }
    //单击事件
    $("#list ul li").click(function (event) {
        event.stopPropagation();//阻止事件冒泡
        console.log(1111);
        if ($(this).find('ul').is(":visible")) {
            //隐藏处理
            $(this).find('ul').hide();
            $(this).find('span').text("+");
        } else {
            $(this).find('ul').show();
            $(this).find('span').text("-");

        }

    })
</script>
<style>
    ul li {
        list-style: none;
    }

    ul li span {
        display: inline-block;
        height: 15px;
        width: 15px;
        border: 1px solid red;
        border-radius: 50%;
        text-align: center;
        font-size: 12px;
    }
</style>

</html>